<template>
  <div :class="classes" @mousedown.prevent>
    <div :class="[prefixCls + '-body']">
      <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
        <div :class="[timePrefixCls + '-header']">
          <template v-if="showDate">{{ leftDatePanelLabel }}</template>
          <template v-else>{{ t('i.datepicker.startTime') }}</template>
        </div>
        <time-spinner
          ref="timeSpinner"
          :show-seconds="showSeconds"
          :hours="value[0] && dateStart.getHours()"
          :minutes="value[0] && dateStart.getMinutes()"
          :seconds="value[0] && dateStart.getSeconds()"
          :steps="steps"
          :disabled-hours="disabledHours"
          :disabled-minutes="disabledMinutes"
          :disabled-seconds="disabledSeconds"
          :hide-disabled-options="hideDisabledOptions"
          @on-change="handleStartChange"
          @on-pick-click="handlePickClick" />
      </div>
      <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
        <div :class="[timePrefixCls + '-header']">
          <template v-if="showDate">{{ rightDatePanelLabel }}</template>
          <template v-else>{{ t('i.datepicker.endTime') }}</template>
        </div>
        <time-spinner
          ref="timeSpinnerEnd"
          :show-seconds="showSeconds"
          :hours="value[1] && dateEnd.getHours()"
          :minutes="value[1] && dateEnd.getMinutes()"
          :seconds="value[1] && dateEnd.getSeconds()"
          :steps="steps"
          :disabled-hours="disabledHours"
          :disabled-minutes="disabledMinutes"
          :disabled-seconds="disabledSeconds"
          :hide-disabled-options="hideDisabledOptions"
          @on-change="handleEndChange"
          @on-pick-click="handlePickClick" />
      </div>
      <Confirm
        v-if="confirm"
        :clearable="clearable"
        @on-pick-clear="handlePickClear"
        @on-pick-success="handlePickSuccess" />
    </div>
  </div>
</template>

<script type="text/ecmascript-6" src="./time-range.js"></script>
